<template>
    <div class="data_container">
      <el-form v-if="formShow" :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item label="数据源类型">
          <el-select v-model="formInline.type" placeholder="请选择数据源类型">
            <el-option label="redis" value="redis"></el-option>
            <el-option label="MySql" value="MySql"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源名称">
          <el-input v-model="formInline.name" placeholder="请输入数据源名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" size="mini" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple-dark">
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="Add">新增</el-button>
          </div></el-col>
        <el-col :span="12"><div class="grid-content bg-purple-light">
          <el-button icon="el-icon-search" circle size="mini" @click="ShowForm"></el-button>
          <el-button icon="el-icon-refresh" circle size="mini" @click="getList"></el-button>
        </div></el-col>
      </el-row>
      <!-- 添加弹框和修改弹框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible" width="500px">
        <el-form :model="form" ref="form" label-width="120px" :rules="rules">
          <el-form-item label="数据源类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择数据源类型">
              <el-option label="redis" value="redis"></el-option>
              <el-option label="MySql" value="MySql"></el-option>
            </el-select>
          </el-form-item>
          <template v-if="form.type ==='redis'">
            <el-form-item label="数据源名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入数据源名称"></el-input>
            </el-form-item>
            <el-form-item label="连接端口" prop="port">
              <el-input v-model="form.port" placeholder="请输入连接端口"></el-input>
            </el-form-item>
            <el-form-item label="数据源密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入数据源密码"></el-input>
            </el-form-item>
            <el-form-item label="数据源连接地址" prop="url">
              <el-input v-model="form.url" placeholder="请输入数据源连接地址"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="form.status" :label="1">启用</el-radio>
            <el-radio v-model="form.status" :label="0">关闭</el-radio>
            </el-form-item>
            <el-form-item label="备注/说明" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注/说明"></el-input>
            </el-form-item>
          </template>
          <template v-else-if="form.type === 'MySql'">
            <el-form-item label="数据源名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入数据源名称" />
            </el-form-item>
            <el-form-item label="数据源连接地址" prop="url">
              <el-input v-model="form.url" placeholder="请输入数据源连接地址" />
            </el-form-item>
            <el-form-item label="连接端口" prop="port">
              <el-input v-model="form.port" placeholder="请输入连接端口" />
            </el-form-item>
            <el-form-item label="连接数据库名称" prop="databaseName">
              <el-input v-model="form.databaseName" placeholder="请输入连接数据库名称" />
            </el-form-item>
            <el-form-item label="数据源用户名" prop="username">
              <el-input v-model="form.username" placeholder="请输入数据源用户名" />
            </el-form-item>
            <el-form-item label="数据源密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入数据源密码" />
            </el-form-item>
            <el-form-item label="额外配置" prop="param">
              <el-input v-model="form.param" placeholder="请输入额外配置" />
            </el-form-item>
            <el-form-item label="状态">
              <el-radio v-model="form.status" :label="1">启用</el-radio>
              <el-radio v-model="form.status" :label="0">关闭</el-radio>
            </el-form-item>
            <el-form-item label="备注/说明" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注/说明" />
            </el-form-item>
          </template>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </div>
      </el-dialog>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="数据源名称"
          align="center">
        </el-table-column>
        <el-table-column
          prop="remark"
          label="备注/说明"
          align="center">
        </el-table-column>
        <el-table-column
          prop="type"
          label="数据源类型"
          align="center">
        </el-table-column>
        <el-table-column
          label="状态"
          align="center">
           <template slot-scope="scope">
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.status===1?'启用':'停用' }}</el-tag>
                </div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="handleTest(scope.row)"
              icon="el-icon-edit"
              v-if="scope.row.status*1===1">链接测试</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleEdit(scope.row)"
              icon="el-icon-edit">修改</el-button>
            <el-button
              size="mini"
              type="text"
              @click="handleCopy(scope.row)"
              icon="el-icon-edit">复制</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="formInline.pageNum"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="formInline.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.total">
          </el-pagination>
      </div>
    </div>
</template>

<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo, testConnection, copy } from '@/api/dataSource/index'
export default {
    data() {
      return {
        loading:true,
        formInline: {
          type: '',
          name: '',
          //默认分页页码
          pageNum:1,
          //默认分页条数
          pageSize:5,
        },
        formShow:true,
        //模拟数据
        tableData: [],
        //总条数
        total:0,
        dialogFormVisible:false,
        form:{},
        rules: {
          name: [
            { required: true, message: '请输入数据源名称', trigger: 'blur' }
          ],
          url: [
            { required: true, message: '请输入数据源连接地址', trigger: 'blur' }
          ],
          port: [
            { required: true, message: '请输入连接端口', trigger: 'blur' }
          ],
          databaseName: [
            { required: true, message: '请输入连接数据库名称', trigger: 'blur' }
          ],
          username: [
            { required: true, message: '请输入数据源用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入数据源密码', trigger: 'blur' }
          ]
        },
        title:''
      }
    },
    created(){
      this.getList()
    },
    methods: {
      //获取数据
      getList(){
        this.loading=true;
        listInfo(this.formInline).then(res=>{
          this.tableData=res.rows;
          this.total=res.total;
          this.loading=false
        })
      },
      //搜索按钮
      search(){
        this.formInline.pageNum=1;
        this.getList()
      },
      //重置按钮
      resetForm(){
        this.formInline={
          type:'',
          name:''
        }
      },
      reset() {
        this.form = {
          id: null,
          type: null,
          name: null,
          url: null,
          port: null,
          databaseName: null,
          username: null,
          password: null,
          param: null,
          status: 1,
          remark: null,
          revision: null,
          createBy: null,
          createTime: null,
          updateBy: null,
          updateTime: null
        }
      },
      //搜索表单显示和隐藏
      ShowForm(){
        this.formShow=!this.formShow;
      },
      //链接测试
      handleTest(row) {
        testConnection(row).then(()=>{
          this.msgSuccess('链接成功')
        })
      },
      //修改按钮
      handleEdit(row){
        this.dialogFormVisible=true;
        this.title="修改数据源管理";
        if(row.name==="MySql"){
          this.form.type="MySql"
        }else if(row.name==="redis"){
          this.form.type="redis"
        }
      },
      //复制
      handleCopy(row) {
       copy(row.id).then(()=>{
         this.msgSuccess("复制成功")
         this.getList()
       })
      },
      //删除
      handleDelete(row) {
        delInfo(row.id).then(()=>{
          this.getList();
          this.msgSuccess('删除成功')
        })
      },
      //切换条数
      handleSizeChange(val) {
        this.formInline.pageNum=val;
      },
      //切换分页页码
      handleCurrentChange(val) {
       this.formInline.pageSize=val;
      },
      //新增按钮
      Add(){
        this.dialogFormVisible=true;
        this.title="添加数据源管理";
        this.reset()
      },
      cancel(){
        this.dialogFormVisible=false;
        this.reset()
      },
      sure(){
        this.$refs['form'].validate(valid=>{
          if(valid){
            if(this.title==="修改数据源管理"){
              updateInfo(this.form).then(res=>{
                if(res.code===200){
                  this.msgSuccess('修改成功')
                  this.dialogFormVisible=false
                  this.getList()
                }
              })
            }else{
              addInfo(this.form).then(res=>{
                this.msgSuccess('新增成功')
                this.dialogFormVisible = false
                this.getList()
              })
            }
          }
        })
      }
    }
}
</script>

<style lang="scss" scoped>
  .data_container{
    width: 100%;
    height: 100%;
    padding: 20px;
    .bg-purple-light{
      float: right;
    }
    .block{
      margin-top: 20px;
    }
  }
</style>